<!doctype html>
<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <!-- Bootstrap -->
  <script src="lib/bootstrap-5.0.2/js/bootstrap.min.js"></script>
  <style src="lib/bootstrap-5.0.2/css/bootstrap.min.css"></style>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

  <title>Vis Network | Example Applications | Node Legend</title>

  <style type="text/css">
    html,
    body {
      font: 10pt arial;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
    }
  </style>

  <script type="text/javascript" src="./vis-network.min.js"></script>

  <script type="text/javascript">
    var network = null;

    var GRAY = "gray",
      BLACK = "#2B1B17";

    // 从后端动态获取图数据
    function fetchGraphData() {
      fetch('graph')
        .then(response => response.json())
        .then(data => {
          const nodes = data.nodes;
          const edges = data.edges;
          console.log("Fetched nodes:", nodes);
          console.log("Fetched edges:", edges);
          drawNetwork(nodes, edges);
        })
        .catch(error => console.error('Error fetching graph data:', error));
    }

    // 使用获取到的数据绘图
    function drawNetwork(nodesArray, edgesArray) {
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodesArray,
        edges: edgesArray,
      };
      var options = {
        nodes: {
          scaling: {
            min: 16,
            max: 32,
          },
        },
        edges: {
          color: GRAY,
          smooth: false,
          arrows: {
            to: {
              enabled: true
            }
          }
        },
        physics: {
          barnesHut: { gravitationalConstant: -30000 },
          stabilization: { iterations: 2500 },
        },
        groups: {
          switch: {
            shape: "triangle",
            color: "#FF9900", // orange
          },
          desktop: {
            shape: "dot",
            color: "#2B7CE9", // blue
          },
          mobile: {
            shape: "dot",
            color: "#5A1E5C", // purple
          },
          server: {
            shape: "square",
            color: "#C5000B", // red
          },
          internet: {
            shape: "square",
            color: "#109618", // green
          },
        },
      };
      network = new vis.Network(container, data, options);

      // 添加点击事件监听器
      network.on("click", function (params) {
        if (params.nodes.length > 0) {
          // 点击了节点
          var nodeId = params.nodes[0];
          var node = nodesArray.find(function (n) {
            return n.id === nodeId;
          });
          console.log("Node clicked:", node);
        } else if (params.edges.length > 0) {
          // 点击了边
          var edgeId = params.edges[0];
          var edge = edgesArray.find(function (e) {
            return e.id === edgeId; // 如果边没有 id，可以基于 from 和 to 匹配
          });
          console.log("Edge clicked:", edge);
        }
      });
    }

    // 页面加载时获取并绘制图数据
    window.onload = function () {
      fetchGraphData();
    };
  </script>
</head>

<!-- 引入 component.html 中的组件 -->
{% include 'components/tree.html' %}

<body>
  
  <div id="mynetwork"></div>
  <tree-component > </tree-component>
  

</body>
<script>
  // 正确获取页面中已有的 <tree-component> 元素
  const component = document.querySelector('tree-component');
  // 调用组件的 renderTree 方法并传入示例数据
  component.renderTree([{ "name": "abc", children: [{ "name": "bcd", children: [] }] }]);
</script>

</html>